<template>
    <section class="chart-container">
        <el-row>
            <el-col :span="12">
                <div id="chartColumn" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartColumn2" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                chartColumn: null,
                chartColumn2: null,
                chartLine: null,
                xAxisData:[],
                xAxisData2:[],
                xAxisData3:[],
                seriesData:[],
                seriesData2:[],
                series2Data: [],
                series3Data: [],

            }
        },

        methods: {
            drawColumnChart() {
              this.chartColumn = echarts.init(document.getElementById('chartColumn'));
              this.chartColumn.setOption({
                  title: { text: '第一阶段完成效果' },
                  tooltip: {},
                  xAxis: {
                      data: this.xAxisData
                  },
                  yAxis: {},
                  series: [{
                      name: '数量',
                      type: 'bar',
                      data: this.seriesData
                    }]
                });
            },
          drawColumnChart2() {
              this.chartColumn2 = echarts.init(document.getElementById('chartColumn2'));
              this.chartColumn2.setOption({
                  title: { text: '第二阶段完成效果' },
                  tooltip: {},
                  xAxis: {
                      data: this.xAxisData2
                  },
                  yAxis: {},
                  series: [{
                      name: '数量',
                      type: 'bar',
                      data: this.seriesData2
                    }]
                });
            },
          drawLineChart() {
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            this.chartLine.setOption({
              title: {
                text: '增长趋势'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['每天参与人数']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xAxisData3
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '每天参与人数',
                  type: 'line',
                  stack: '总量',
                  data: this.series3Data
                },
              ]
            });
          },
          loadData1() {
            this.$http.get("/admin/adminLucky/getCount").then(res=>{
              // console.log(res.data.data)
              let{count,name} = res.data.data
              this.xAxisData = name;
              // console.log(this.xAxisData)
              this.seriesData = count;
              // console.log(this.seriesData)
              this.drawColumnChart()
            })
          },
          loadData2() {
            this.$http.get("/admin/invite/getCount").then(res=>{
              // console.log(res.data.data)
              let{count,name} = res.data.data
              this.xAxisData2 = name;
              // console.log(this.xAxisData)
              this.seriesData2 = count;
              // console.log(this.seriesData)
              this.drawColumnChart2()
            })
          },
          loadData3() {
            this.$http.get("/admin/adminLucky/getChartLine").then(res=>{
              console.log(res.data.data[1].count)
              console.log(res.data.data[0].name)
              this.series3Data = res.data.data[1].count;
              console.log("series3Data",this.series3Data)
              this.xAxisData3 = res.data.data[0].name;
              console.log("xAxisData3",this.xAxisData3)
              this.drawLineChart()

            })
          },
            drawCharts() {
                this.drawColumnChart()
                this.drawColumnChart2()
                this.drawLineChart()
            },
        },
        mounted: function () {
          this.loadData1()
          this.loadData2()
          this.loadData3()
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style scoped>
    .chart-container {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/

    .el-col {
        padding: 30px 20px;
    }
</style>
